<!-- 分组表单组件 -->
<template>
  <view class="group-form-container">
    <u-form :model="formData" ref="uForm" errorType="message" :rules="rules">
      <u-form-item label="分组名称" prop="name" borderBottom>
        <u-input v-model="formData.name" placeholder="请输入分组名称" />
      </u-form-item>
    </u-form>
    
    <view class="form-actions">
      <u-button type="primary" @click="submitForm">{{ isEdit ? '保存修改' : '创建分组' }}</u-button>
      <u-button type="default" @click="cancel" class="cancel-btn">取消</u-button>
    </view>
  </view>
</template>

<script>
export default {
  name: 'GroupForm',
  props: {
    // 编辑模式下传入的分组数据
    groupData: {
      type: Object,
      default: () => ({})
    },
    // 是否为编辑模式
    isEdit: {
      type: Boolean,
      default: false
    },
    // 所属清单ID
    listId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      formData: {
        name: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入分组名称', trigger: 'blur' },
          { min: 1, max: 20, message: '分组名称长度在1-20个字符之间', trigger: 'blur' }
        ]
      }
    };
  },
  created() {
    // 如果是编辑模式，初始化表单数据
    if (this.isEdit && this.groupData) {
      this.formData.name = this.groupData.name || '';
    }
  },
  methods: {
    // 提交表单
    submitForm() {
      console.log('GroupForm提交表单');
      this.$refs.uForm.validate(valid => {
        if (valid) {
          const groupData = {
            name: this.formData.name,
            listId: this.listId
          };
          
          // 如果是编辑模式，添加ID
          if (this.isEdit && this.groupData && this.groupData.id) {
            groupData.id = this.groupData.id;
          }
          
          console.log('GroupForm提交数据', groupData);
          this.$emit('submit', groupData);
        }
      });
    },
    
    // 取消操作
    cancel() {
      this.$emit('cancel');
    }
  }
}
</script>

<style lang="scss" scoped>
.group-form-container {
  padding: 20px;
}

.form-actions {
  margin-top: 30px;
  display: flex;
  flex-direction: column;
}

.cancel-btn {
  margin-top: 15px;
}
</style> 